<template>
  <div>
    <div class="info_tab_box">
      <tab
        :line-width="2"
        custom-bar-width="30px"
      >
        <tab-item
          v-for="(item,index) in infotab"
          :key="index"
          :selected="index===indexs"
          @on-item-click="tabIndex(item.classification_id,item.title)"
        >{{item.title}}</tab-item>
      </tab>
    </div>
    <div
      class="pos"
      ref="heig"
    >
      <swiper
        @on-index-change="swiperChange"
        v-if="swiperHeight"
        v-model="indexs"
        :show-dots="false"
        :height="swiperHeight+'px'"
      >
        <swiper-item
          v-for="(item, index) in infotab"
          :key="index"
        >
          <div
            class="scroll"
            ref="wrapper"
            v-if="index === indexs"
          >
            <div class="list-box">
              <div v-if="JSON.stringify(firstListData) !== '{}'">
                <first-list
                  :firstListData="firstListData"
                  v-on:listcallback="listClick"
                ></first-list>
              </div>
              <div class="list_box_item">
                <list
                  class="list-b"
                  v-for="(item,index) in listarr"
                  :key="index"
                  :item="item"
                  :status="true"
                  v-on:listcallback="listClick"
                ></list>
              </div>
              <load-more
                :show-loading="loadStatus"
                :tip="loadStatusText"
                v-if="listarr.length>3"
              ></load-more>
            </div>
          </div>
        </swiper-item>
      </swiper>
    </div>
    <div
      class="info_yin"
      v-show="info_yin_status"
    >
      <img
        src="http://o6wndwjxn.qnssl.com/4cb39201901041555034376.gif"
        alt=""
      >
    </div>
    <bottomtab></bottomtab>
  </div>
</template>

<script>
import bottomtab from '@/components/public/tab'
import BScroll from 'better-scroll'
import list from '@/components/public/list'
import {
  info,
  datalist
} from '@/api/information'
import firstList from '@/components/public/firstlist'
import {
  Tab,
  TabItem,
  Swiper,
  SwiperItem,
  LoadMore
} from 'vux'
export default {
  data () {
    return {
      info_yin_status: true,
      firstListData: {},
      page: 1,
      show1: false,
      text1: 'Processing',
      swiperHeight: '',
      indexs: 0,
      infotab: [],
      listarr: [],
      scrollarr: [],
      loadStatus: false,
      loadStatusText: '加载完毕'
    }
  },
  components: {
    TabItem,
    Tab,
    bottomtab,
    list,
    Swiper,
    SwiperItem,
    LoadMore,
    firstList
  },
  methods: {
    // 切换swiper
    swiperChange (index) {
      this.scroll.disable()
      this.listarr = []
      this.page = 1
      let id = this.infotab[index].classification_id
      let title = this.infotab[index].title
      this.getlist(id, title)
    },
    // 点击切换请求
    tabIndex (id, title) {
      // console.log('id',id)
      this.listarr = []
      this.page = 1
      this.selectedId = id
      this.getlist(id, title)
    },
    // 获取顶部导航
    getinfo () {
      // console.log(this.$route.query.jump_id)
      let type
      let clid
      if (!this.$route.query.jump_id) {
        type = 1
        clid = 0
        // console.log('没有')
        // alert('空嘚,空嘚,空嘚')
      } else if (this.$route.query.jump_st) {
        type = 1
        clid = 0
        // console.log('自己赋值')
      } else {
        type = 2
        clid = this.$route.query.jump_id
        // console.log('有')
      }
      let prams = {
        classification_id: clid,
        type: type
      }
      // console.log('发送数据',prams)
      info(prams).then(res => {
        let {
          code,
          data
        } = res.data
        if (code === 200) {
          let id
          let title
          this.infotab = data.classification
          this.$nextTick(() => {
            if (this.$route.query.jump_id) {
              if (this.$route.query.jump_st == 1) {
                this.$route.query.jump_st = 2
              } else if (this.$route.query.jump_st == 2) {
                this.$route.query.jump_id = data.classification[0].classification_id
                this.$route.query.jump_st = 3
              } else {
                setTimeout(() => {
                  data.classification.forEach((element, index) => {
                    let idid = parseInt(this.$route.query.jump_id)
                    if (element.classification_id === idid) {
                      id = this.$route.query.jump_id
                      this.indexs = index
                    }
                  })
                }, 0.1)
                setTimeout(() => {
                  this.getlist(id, title)
                }, 5)
                this.info_yin_status = false
                return
              }
              setTimeout(() => {
                data.classification.forEach((element, index) => {
                  let idid = parseInt(this.$route.query.jump_id)
                  if (element.classification_id === idid) {
                    id = this.$route.query.jump_id
                    this.indexs = index
                  }
                })
              }, 0.1)
              setTimeout(() => {
                this.getinfo()
              }, 300)
            } else {
              if (this.$route.query.jump_st == 3) {
                setTimeout(() => {
                  this.info_yin_status = false
                }, 300)
                return
              }
              this.$route.query.jump_id = data.classification[1].classification_id
              this.$route.query.jump_st = 1
              this.getinfo()
            }
            setTimeout(() => {
              this.getlist(id, title)
            }, 5)
          })
        }
      })
    },
    // 初始化滚动
    initwraper () {
      this.$nextTick(() => {
        let _this = this
        this.scroll = new BScroll(this.$refs.wrapper[0], {
          click: true,
          scrollY: true,
          scrollX: false,
          tap: true,
          probeType: 3,
          pullUpLoad: {
            threshold: 0
          }
        })
        // 上拉加载
        this.scroll.on('pullingUp', function () {
          _this.getlist(false) // 传一不更值
          _this.loadStatus = true
          _this.loadStatusText = '加载中'
          _this.scroll.finishPullUp()
          _this.scroll.refresh()
        })
      })
    },
    // 获取列表
    getlist (id, title) {
      // 判断是否是上拉加载
      if (id !== false) {
        this.selectedId = id
      }
      this.$vux.loading.show({
        text: 'Loading'
      })
      let prams = {
        page: this.page,
        pageshow: 10
      }
      if (id === false) {
        prams.classification_id = this.selectedId
      } else {
        prams.classification_id = id
      }
      datalist(prams).then(res => {
        this.loadStatus = false
        this.$vux.loading.hide()
        let {
          code,
          data
        } = res.data
        // console.log('info课程详情', res)
        if (code === 200) {
          if (this.page === 1) {
            this.firstListData = data[0] // 第一条数据
            data.splice(0, 1)
            this.listarr = data
          } else {
            this.listarr = [...this.listarr, ...data]
          }
          this.page = this.page + 1
        } else {
          this.loadStatusText = '加载完毕'
          if (this.page === 1) {
            this.listarr = []
            this.firstListData = {}
          }
        }
        // 判断是否是初次请求是
        if (id !== false) {
          this.initwraper()
        }
      })
    },
    // 计算高度
    height () {
      this.$nextTick(() => {
        this.swiperHeight = this.$refs.heig.offsetHeight
      })
    },
    // 列表点击传出
    listClick (item) {
      // 判断机型
      if (window.__wxjs_is_wkwebview !== true) {
        this.$router.push({
          path: '/coursedetails',
          query: {
            curriculumId: item.curriculum_id,
            title: item.title
          }
        })
      } else {
        window.location.href =
          `/coursedetails?curriculumId=${item.curriculum_id}&title=${item.title}`
      }

      // 				this.$router.push({
      // 					path: '/coursedetails',
      // 					query: {
      // 						curriculumId: item.curriculum_id,
      // 						title: item.title
      // 					}
      // 				})
    }
  },
  created () {
    this.touch = {}
    this.getinfo()
  },
  mounted () {
    this.height()
  }
}
</script>

<style lang="less" scoped>
.info_yin {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.5);
}
.info_yin > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.info_tab_box {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  height: 44px;
}
.list_box_item {
  width: 90%;
  margin: 5px 5% 0 5%;
}
.list-b {
  width: 100%;
  display: inline-block;
}
.list-b:nth-child(odd) {
  margin-right: 6%;
}

.sl-l {
  text-align: left;
  flex: 1;
  color: #ccc;
}

.sl-r {
  text-align: right;
  flex: 1;
  color: red;
}

.pos {
  position: fixed;
  top: 44px;
  left: 0;
  bottom: 54px;
  right: 0;
  overflow: hidden;
}

.scroll {
  width: 100%;
  height: 100%;
}
.vux-tab .vux-tab-item {
  font-size: 15px;
}
.vux-tab .vux-tab-item.vux-tab-selected {
  font-weight: bold;
}
</style>
